<script lang="ts">
//使用<keep-alive></keep-alive>缓存路由必须显式的声明name
export default {
  name: "customer",
};
</script>

<script setup lang="ts">
import { Plus, Refresh, Setting, EditPen, Delete } from "@element-plus/icons-vue";
import { reactive, ref, onMounted, nextTick, computed } from "vue";
import {
  get_customerinfo,
  insert_customerinfo,
  update_customerinfo,
  delete_customerinfo,
} from "../../request/api";
import type { ElForm } from "element-plus";
import { ElMessage } from "element-plus";

//加载开关
const loading = ref(false);
//分店表格列表
const tabledata = ref([]);
//弹出框类型0是新增1是修改
const dialogtype = ref(0);
//弹出框真假
const dialogflag = ref(false);
//当前页
const currentPage = ref(1);
//总页数
const total = ref(0);
//每页显示条目个数
const pageSize = ref(10);
//每页多少条
const size = ref("");

//新增和修改的表单
const form = reactive({
  customer_name: "",
  customer_sex: "1",
  customer_phone: "",
  customer_birthday: null,
  customer_email: "",
  customer_address: "",
  customer_qq: "",
  customer_remark: "",
});
//表单规则
const rules = reactive({
  customer_name: [
    {
      required: true,
      message: "客户名不能为空",
      trigger: "blur",
    },
  ],
});
//当前列id
const id = ref(0);

type FormInstance = InstanceType<typeof ElForm>;
const formref = ref<FormInstance>();

//页面进入请求数据
const { data } = await get_customerinfo(currentPage.value, pageSize.value);
if (data.code == 200) {
  console.log(data.data);
  total.value = data.data.total;
  tabledata.value = data.data.data;
  console.log(data);
}
//刷新
const refreshtable = async (currentPage, pageSize) => {
  loading.value = true;
  const { data } = await get_customerinfo(currentPage, pageSize);
  loading.value = false;
  if (data.code == 200) {
    console.log(data.data);
    total.value = data.data.total;
    tabledata.value = data.data.data;
  }
};
//监听current-page事件
const handleCurrentChange = async (newpage) => {
  refreshtable(newpage, pageSize.value);
};

//监听page-size每页条数
const handleSizeChange = async (pagesize) => {
  refreshtable(currentPage.value, pagesize);
};
//点击删除按钮
const delclick = async (row) => {
  const { data } = await delete_customerinfo(row.customer_id);
  if (data.code == 200) {
    ElMessage.success(data.msg);
    refreshtable(currentPage.value, pageSize.value);
  } else {
    ElMessage.error(data.msg);
  }
};

//点击修改按钮
const updateclick = (row) => {
  dialogtype.value = 1;
  dialogflag.value = true;
  nextTick(() => {
    form.customer_name = row.customer_name;
    form.customer_sex = row.customer_sex;
    form.customer_phone = row.customer_phone;
    form.customer_birthday = row.customer_birthday;
    form.customer_email = row.customer_email;
    form.customer_qq = row.customer_qq;
    form.customer_remark = row.customer_remark;
    form.customer_address = row.customer_address;
  });
  id.value = row.customer_id;
};

//点击新增或修改弹出框的确认按钮
const dialogclick = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      //新增
      if (dialogtype.value == 0) {
        const { data } = await insert_customerinfo(form);

        if (data.code == 200) {
          ElMessage.success(data.msg);

          refreshtable(currentPage.value, pageSize.value);
          formEl.resetFields();
          dialogflag.value = false;
        } else {
          ElMessage.error(data.msg);
        }
      } else if (dialogtype.value == 1) {
        //修改
        const { data } = await update_customerinfo(id.value, form);
        if (data.code == 200) {
          ElMessage.success(data.msg);
          formEl.resetFields();
          refreshtable(currentPage.value, pageSize.value);
          dialogflag.value = false;
        } else {
          ElMessage.error(data.msg);
          // formEl.resetFields();
        }
      }
    } else {
      console.log("验证失败");
    }
  });
};

//点击状态开关
const switchlick = async (row) => {
  id.value = row.customer_id;
  let updatedata = {
    customer_switch: row.customer_switch,
  };

  const { data } = await update_customerinfo(id.value, updatedata);

  if (data.code == 200) {
    ElMessage.success(data.msg);
    console.log("dsad");
  } else {
    ElMessage.error(data.msg);
    refreshtable(currentPage.value, pageSize.value);
  }
};

//关闭模态框之前清空表单数据
const beforeclosedialog = (done) => {
  //清空表单数据
  formref.value!.resetFields();
  return done(false);
};
</script>

<template>
  <div class="el-card_body">
    <el-table
      v-loading="loading"
      :data="tabledata"
      height="calc(100vh - 300px)"
      style="width: 100%"
    >
      <el-table-column label="Address Info">
        <template #header>
          <div class="ele-table-tool ele-table-tool-default">
            <el-button
              type="primary"
              :icon="Plus"
              @click="
                dialogflag = true;
                dialogtype = 0;
              "
              >添加</el-button
            >
            <div class="ele-tool">
              <el-tooltip effect="dark" content="刷新" placement="top">
                <el-button
                  size="small"
                  @click="refreshtable(currentPage, pageSize)"
                  :icon="Refresh"
                ></el-button>
              </el-tooltip>

              <el-tooltip effect="dark" content="列设置" placement="top">
                <el-button size="small" :icon="Setting"></el-button>
              </el-tooltip>
            </div>
          </div>
        </template>
        <el-table-column type="expand">
          <template #default="props">
            <div class="vab-table-expand">
              <p>
                <span class="vab-table-expand-title"> 邮件:</span
                >{{ props.row.customer_email }}
              </p>
              <p>
                <span class="vab-table-expand-title">QQ:</span>{{ props.row.customer_qq }}
              </p>
              <p>
                <span class="vab-table-expand-title">生日:</span
                >{{ props.row.customer_birthday }}
              </p>
              <p>
                <span class="vab-table-expand-title">地址:</span
                >{{ props.row.customer_address }}
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" type="index" width="50" />
        <el-table-column prop="customer_name" label="客户名" align="center" />

        <el-table-column prop="customer_sex" label="性别" align="center" />
        <el-table-column prop="customer_phone" label="电话" align="center" />
        <el-table-column prop="customer_remark" label="备注" align="center" />
        <el-table-column prop="user_name" label="修改人" align="center" />
        <el-table-column prop="customer_creationtime" label="创建时间" />
        <el-table-column prop="customer_updatime" label="修改时间" />
        <el-table-column prop="customer_switch" label="状态" align="center" width="80">
          <template #default="scope">
            <el-switch
              v-model="scope.row.customer_switch"
              :active-value="1"
              :inactive-value="0"
              @change="switchlick(scope.row)"
            />
          </template>
        </el-table-column>

        <el-table-column fixed="right" align="center" label="操作" width="150">
          <template #default="scope">
            <el-button type="text" @click="updateclick(scope.row)" :icon="EditPen"
              >修改</el-button
            >

            <el-popconfirm @confirm="delclick(scope.row)" title="是否确认删除?">
              <template #reference>
                <el-button class="operate" type="text" :icon="Delete">删除</el-button>
              </template>
            </el-popconfirm>
            <!-- <el-button type="text" class="reset" :icon="CopyDocument">重置密码</el-button> -->
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="ele-pagination">
      <el-pagination
        v-model:currentPage="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @update:current-page="handleCurrentChange"
        @update:page-size="handleSizeChange"
      />
    </div>
  </div>
  <!-- 用户新增和修改的弹出框-->
  <el-dialog
    :before-close="beforeclosedialog"
    :title="dialogtype == 0 ? '新增' : '修改'"
    v-model="dialogflag"
    width="25%"
  >
    <el-form ref="formref" :model="form" :rules="rules" label-width="85px">
      <el-form-item label="客户名:" prop="customer_name">
        <el-input v-model="form.customer_name" placeholder="请填写客户名称"></el-input>
      </el-form-item>
      <el-form-item label="性别:" prop="customer_sex">
        <el-select v-model="form.customer_sex" placeholder="请选择性别">
          <el-option label="未知" value="1" />
          <el-option label="男" value="2" />
          <el-option label="女" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="电话:" prop="customer_phone">
        <el-input v-model="form.customer_phone" placeholder="请填写客户电话"></el-input>
      </el-form-item>
      <el-form-item label="生日:" prop="customer_birthday">
        <el-date-picker
          v-model="form.customer_birthday"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择日期"
        />
      </el-form-item>
      <el-form-item label="邮件:" prop="customer_email">
        <el-input v-model="form.customer_email" placeholder="请填写邮件"></el-input>
      </el-form-item>
      <el-form-item label="QQ:" prop="customer_qq">
        <el-input v-model="form.customer_qq" placeholder="请填写QQ号"></el-input>
      </el-form-item>
      <el-form-item label="地址:" prop="customer_address">
        <el-input
          type="textarea"
          v-model="form.customer_address"
          placeholder="请填写地址"
        ></el-input>
      </el-form-item>
      <el-form-item label="备注:" prop="customer_remark">
        <el-input
          type="textarea"
          v-model="form.customer_remark"
          placeholder="请填写备注"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogflag = false, formref!.resetFields();">取消</el-button>
        <el-button type="primary" @click="dialogclick(formref)">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="less" scoped>
.el-card_body {
  background-color: white;
  padding: 15px;
}
.roleformclass {
  margin-bottom: 15px;
}
/deep/.roleformclass.el-form--inline .el-form-item {
  margin-right: 15px;
}
.ele-table-tool {
  display: inline-flex;
  flex-wrap: wrap;
  width: 100%;
}
.ele-tool {
  margin: 5px 0 5px auto;
}

.ele-pagination {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}
/deep/ .operate {
  color: red;
}
/deep/.reset {
  color: #52c41a;
}
/deep/.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: -9px;
  margin-left: 47px;
  // margin-bottom: 20px;
  // margin-right: 20px;
}
.vab-table-expand {
  padding: 20px;
  line-height: 30px;
}
.vab-table-expand-title {
  display: inline-block;
  width: 50px;
  font-weight: 700;
}
</style>
